<template>
    <div class="friends-page">
        <back title="朋友">
            <span class="mail-list iconfont icon-tongxunlu" @click="$router.push('/mail-list')"></span>
        </back>
        <div class="friends-content">
            <search-input @hidesearch="hidesearch"></search-input>

            <!--在聊天好友列表-->
            <ul class="online-chat">
                <template v-if="chatRecordList.length > 0">
                    <li class="chat-item" 
                    v-for="(item,index) in chatRecordList" :key="index" >
                        <left-slider :item="item" @removeItem="removeItem(item)">
                            <template>
                                <span class="avatar iconfont icon-morentouxiang"></span>
                                <div class="user-right">
                                    <div class="n-t">
                                        <span v-if="item.list[item.list.length - 1]['isLeft']" class="name">{{item.list[item.list.length - 1]['user']['name']}}</span> 
                                        <span v-else class="name">{{item.list[item.list.length - 1]['extra']['name']}}</span> 
                                        <span class="time">{{getTime(item.list[item.list.length - 1])}}</span>
                                    </div>
                                    <div class="text" v-html="item.list[item.list.length - 1]['content']"></div>
                                    <label class="tipmsg" v-if="getsingleNum[index] && getsingleNum[index]['num'] > 0">{{getsingleNum[index]['num']}}</label>
                                </div>
                            </template>
                        </left-slider>
                    </li>
                </template>
            </ul>
        </div>

        <!--搜索-->
        <search v-if="showsearch" @hidesearch="hidesearch"></search>
    </div>
</template>

<style lang="stylus">
.friends-page{
    padding-top:50px;
    height:100%;
    background:#f7f7f7;
    .mail-list{
        display: block;
        width:40px;
        height:40px;
        position: absolute;
        top:2px;
        right:0;
        font-size:28px;
        color:rgb(61, 129, 203);
    }
    .friends-content{
        height:100%;
        overflow-y:auto;
        .online-chat{
            min-height calc(100% - 70px)
            background #fff
            border-top 1px solid #eee
            .chat-item{
                display flex
                align-items center
                padding 0 10px
                .avatar{
                    font-size 60px
                    flex-shrink 0
                    margin-right 10px
                    color #fff
                    background #3c81cb
                    border-radius 5px
                    
                }
                .user-right{
                    border-bottom 1px solid #eee
                    flex 1
                    line-height 30px
                    padding 5px 0
                    position relative
                    .n-t{
                        width 100%
                        font-size 14px
                        display flex
                        align-items center
                        justify-content space-between
                        .name{
                            font-size 18px
                            // font-weight 600
                        }
                        .time{
                            font-size 12px
                            color #999
                        }
                    }
                    .text{
                        font-size 14px
                        color #888
                        margin-right 30px
                    }
                    .tipmsg{
                        background #1359b6
                        color #fff
                        display inline-block
                        width 20px
                        height 20px
                        line-height 20px
                        position absolute
                        bottom 10px
                        right 0
                        border-radius 50%
                        font-size 12px
                        text-align center
                    }
                }
            }
        }
    }
}
</style>


<script>
import {mapGetters} from 'vuex'
import time from '@/util/time'
import search from '@/components/search'
import searchInput from '@/components/search/search'
import userItem from '@/components/friends/item.vue'
import leftSlider from '@/components/leftSlider'
export default {
  data() {
    return {
      chatRecordList: [],
      showsearch:false
    }
  },
  components:{
      userItem,
      search,
      searchInput,
      leftSlider
  },
  beforeRouteEnter(to,from,next){
    next(vm => {
        vm.getChatRecordList(from.name);
        next()
    })
  },
  mounted(){
      
  },
  computed:{
        ...mapGetters([
            'getconnectDb',
            'getAllmsg',
            'getsingleNum',
            'getRecordmsg'
        ])
  },
  watch:{
      getAllmsg(val){
          this.chatRecordList = val
      },
      getRecordmsg(val){
          this.getChatRecordList();
      }
  },
  methods: {
    /**
     * 格式化时间
     */
    getTime(item){
        let ctime_show =  time.gettime(item.ctime_show)
        return ctime_show
    },
      /**
       * 移除聊天
       */
    removeItem(item){   
        this.$createDialog({
            type: 'confirm',
            icon: 'cubeic-important',
            content: '确定删除聊天记录吗？',
            confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
            },
            cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
            },
            onConfirm: () => {
                DB.remove('huahui_chat',item.target_uid)
            },
            onCancel: () => {

            }
        }).show()
    },
    hidesearch(){
        this.showsearch = !this.showsearch
    },
    /**
     * 获取我所聊天的列表
     */
    getChatRecordList(type){
        if(this.getconnectDb){
            DB.readAll('huahui_chat',type)
        }
    },
    selectItem(item) {
      console.log(item.name)
    },
    clickTitle(title) {
      console.log(title)
    }
  }
}
</script>
